<template>
  <div class="ball-wrapper">
    <div class="ball-1"></div>
    <div class="ball-2"></div>
    <div class="ball-3"></div>
    <div class="ball-4"></div>
    <div class="ball-text">
      <div class="title">当前安全得分</div>
      <div class="num" title="(正常数据占比*1+验证机制覆盖率*1+事务整体及时率*1+无合规性风险率*1)/4">
        {{percentage}}
        <span style="font-size:32px;">分</span>
      </div>
      <x-loading v-if="showLoading"></x-loading>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import bus from '@/utils/bus'
import Loading from "@/components/Loading";

export default {
    data() {
      return {
        queue:3,
        percentage:0,
        percentage1:0,
        percentage2:0,
        percentage3:0,
        showLoading:false
      }
    },
    components:{
      'x-loading':Loading
    },
    mounted(){
      //this.render()
    },
    created(){
      bus.$on('complete1',v=>{//兄弟取值
        this.percentage1 = this.percentage1 + v;
        this.calcTotal();
      });
      bus.$on('complete2',v=>{
        this.percentage2 = this.percentage2 + v;
        this.calcTotal();
      });
      bus.$on('complete3',v=>{
        this.percentage3 = this.percentage3 + v;
        this.calcTotal();//调用统计函数
      });
       
    },
    updated(){
      
    },
    methods: {
      calcTotal(){
        this.queue--;//执行三次
        if(this.queue===0){
         this.percentage=((this.percentage1+this.percentage3+this.percentage2+66.66)/4).toFixed(1);
        }
      },
      render(){
        this.showLoading = true;
        axios.get(this.URLHEAD+'JRFXTSGZ').then(res=>{
          let json = res.data;
          this.percentage= json.Data
          this.showLoading=false
        })
      }
    }
}
</script>